@charset "UTF-8";
/*全局*/
body{
	font-family:'Microsoft Yahei';
	font-size:12px;
	color:#666;
	margin-top: 0px;
	}
html,body{
	height:100%s
	}

a{
	/*去点a标签的默认样式*/
	text-decoration: none;
}

main{
	width:1200px;
	height:auto;
	margin:0 auto;
}

ul,
ol {
	list-style: none;
}

img {
	border: none;
}





/*头部*/
.header_con{
	background-color:#f7f7f7;
	height:29px;
	border-bottom:1px solid #dddddd
}

.header{
	width:1200px;
	height:29px;
	margin:0 auto;
}

.welcome,.login_info,.login_btn,.user_link{
	line-height:29px;
}

.login_info{
	display:none;
}

.login_info em{color:#ff8800}

.login_btn a,.user_link a{
	color:#666;
}

.login_btn a:hover,.user_link a:hover{
	color:#ff8800;
}

.login_btn span,.user_link span{
	color:#cecece;
	margin:0 10px;
}


/* logo、搜索框样式 */

.search_bar{width:1200px;height:115px;margin:0 auto;}
.logo{width:150px;height:59px;margin:29px 0 0 17px;}

.search_con{width:616px;height:38px;border:1px solid #79ffff;margin:34px 0 0 124px;background:url(../images/icons.png) 10px -338px no-repeat;border-radius: 20px;overflow: hidden;}
.search_con .input_text{width:470px;height:34px;border:0px;margin:2px 0 0 36px;outline:none;font-size:12px;color:#737272;font-family:'Microsoft Yahei'}

.search_con .input_btn{
	width:100px;height:38px;background-color:#79ffff;border:0px;font-size:14px;color:#fff;font-family:'Microsoft Yahei';outline:none;cursor:pointer;
}

.fl{
	float: left;
}

.fr{
	float:right;
}

/*导航条*/
ul.nav-tabs{
    width: 100px;
    margin-top: 20px;
    margin-left:-150px;
    /* border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); */
}

ul.nav-tabs img{
	width: 98.4px;
	outline: none;
	overflow: hidden;
}

ul.nav-tabs li{
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
    margin: 0;
    border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
    border-top: none;
}
ul.nav-tabs li a{
    margin: 0;
    padding: 8px 16px;
    border-radius: 0;
}
ul.nav-tabs li a:hover{
    color: #fff;
  	background-color: #0088cc;
    border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
    border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
    border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
    top: 30px; /* Set the top position of pinned element */
}


/*中部內部样式*/

.content{
	margin-top: 40px;
	margin-bottom: 50px;
	border:0.5px solid #eee;
	border-radius: 4px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.067);
}
/*left*/
.content .content-left{
	width:60%;
}

.content .content-left>div{
	border:0.5px solid #eee;
	border-radius: 4px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.067);
}

.content .content-left>div>div{
	height:15%;
	font-size:22px;
	vertical-align: middle;
	line-height: 15%;
}


/*分类标签*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background-color: #bbdefb;
  --blue-50: #e3f2fd;
  --blue-100: #bbdefb;
  --blue-A700: #2962ff;
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-A700: #00c853;
  --purple-50: #f3e5f5;
  --purple-100: #e1bee7;
  --purple-A700: #aa00ff;
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-A700: #ff6d00;
  --orange-700: #f57c00;
  --grey-900: #212121;
  --white: #fff;
  --round-button-active-color: #212121;
  --translate-main-slider: 100%;
  --main-slider-color: #e3f2fd;
  --translate-filters-slider: 0;
  --filters-container-height: 3.8rem;
  --filters-wrapper-opacity: 1;
}

button {
  border: none;
  cursor: pointer;
  background-color: transparent;
  outline: none;
}

nav.amazing-tabs {
  background-color: var(--white);
  border-radius: 2.5rem;
  user-select: none;
  padding-top: 1rem;
}

.main-tabs-container {
  padding: 0 1rem 1rem 1rem;
}

.main-tabs-wrapper {
  position: relative;
}

ul.main-tabs,
ul.filter-tabs {
  list-style-type: none;
  display: flex;
}

ul.main-tabs li {
  display: inline-flex;
  position: relative;
  padding: 1.5rem;
  z-index: 1;
}

.avatar,
.avatar img {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  pointer-events: none;
}

.avatar img {
  object-fit: cover;
}

.round-button {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-900);
  transition: color 0.2s ease-in-out;
}

.round-button:hover,
.round-button.active {
  color: var(--round-button-active-color);
}

.round-button svg {
  pointer-events: none;
  height: 2.8rem;
  width: 2.8rem;
  transform: translate(0, 0);
}

.main-slider {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-main-slider));
}

.main-slider-circle {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--main-slider-color);
}

.animate-jello {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.filters-container {
  overflow: hidden;
  padding: 0 3rem;
  transition: max-height 0.4s ease-in-out;
  max-height: var(--filters-container-height);
}

.filters-wrapper {
  position: relative;
  transition: opacity 0.2s ease-in-out;
  opacity: var(--filters-wrapper-opacity);
}

.filter-tabs {
  border-radius: 1rem;
  padding: 0.3rem;
  overflow: hidden;
  background-color: var(--orange-50);
}

.filter-tabs li {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 33.33%;
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  flex-grow: 1;
  height: 3rem;
  padding: 0 1.5rem;
  color: var(--orange-700);
  font-family: "Open Sans", sans-serif;
}

.filter-button.filter-active {
  transition: color 0.4s ease-in-out;
  color: var(--grey-900);
}

.filter-slider {
  pointer-events: none;
  position: absolute;
  padding: 0.3rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.filter-slider-rect {
  height: 3rem;
  width: 33.33%;
  border-radius: 0.8rem;
  background-color: var(--white);
  box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-filters-slider));
}

.main-tabs span{
	font-size: 15px;
	font:bold;
	font-family:"宋体";
	text-align: center;
	color: #000;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}

.main-tabs-container{
	width: 250px;
}

/*列表*/

#bq{
	width:65%;
	height: 100px;
}

#bq>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#bq>ul li {
    float: left;
}

#bq>ul li a {
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#bq>ul li a:hover {
    color: #ff8040;
}


/*热门推荐*/
#section-1{
	line-height: 100%;
	font-size: 12px;
	font-family: '微软雅黑';
}

.leftbottom{
	margin: 0;
	padding: 0;
	display: block;
}

.girl {
    margin-right: -18px;
}

.leftbottom ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.leftbottom ul li a{
	text-decoration: none;
	margin: 0;
	padding: 0;
	color: #000;
}

.girl li {
    height: 45%;
	width: 31%;
	margin-right: 1%;
	margin-left:1%;
    background: #fff;
    position: relative;
    float: left;
    border-radius: 5px;
    border-bottom: 1%;
}



.leftbottom ul li{
	list-style-type: none;
}


.girl li a img {
   	border-radius:5px;
    display: block;
    margin: 0;
	padding: 0;
}

.girl li {
    text-align: -webkit-match-parent;
}


.opatxt1 {
    width: 180px;
    height: 22px;
    background: rgb(0 0 0 / 27%);
    line-height: 22px;
    padding-left: 5px;
    position: absolute;
    left: 0;
    bottom: 15px;
    color:#fff;
}

.girl li a:-webkit-any-link {
    cursor: pointer;
}




/*right*/
.content .content-right{
	width: 40%;
}

.content .content-right>div{
	height: 524.5px;
	font-size:22px;
	border:0.5px solid #eee;
	border-radius: 4px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.067);
}


/*section-7 风云榜*/

.leaderboard {
  max-width: 490px;
  height:523px;
  width: 100%;
  border-radius: 12px;
}
.leaderboard header {
  --start: 15%;
  height: 100px;
  background-image: linear-gradient(to right, #5b7cfa, #3659db);
  color: #fff;
  position: relative;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.leaderboard header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-radial-gradient(circle at var(--start), transparent 0%, transparent 10%, #3659db 10%, #3659db 17%);
  opacity: .15;
  z-index: 1;
}
.leaderboard header .leaderboard__title {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(var(--start) * .75);
  transform: translateY(-50%);
  text-transform: uppercase;
  margin: 0;
}
.leaderboard header .leaderboard__title span {
  display: block;
}
.leaderboard header .leaderboard__title--top {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6.5px;
}
.leaderboard header .leaderboard__title--bottom {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3.55px;
  opacity: .65;
  transform: translateY(-2px);
}
.leaderboard header .leaderboard__icon {
  fill: #fff;
  opacity: .35;
  width: 50px;
  position: absolute;
  top: 50%;
  left: var(--start);
  transform: translate(-50%, -50%);
}
.leaderboard__profiles {
  background-color: #fff;
  border-radius: 0 0 12px 12px;
  padding: 15px 15px 20px;
  display: grid;
  row-gap: 8px;
}
.leaderboard__profile {

  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  padding: 10px 30px 10px 10px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98), box-shadow 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98);
  background-color: #fff;
}
.leaderboard__profile:hover {
  transform: scale(1.2);
  box-shadow: 0 9px 47px 11px rgba(51, 51, 51, 0.18);
}
.leaderboard__picture {
  max-width: 100%;
  width: 60px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #ebeef3, 0 0 0 25px #f3f4f6;
}
.leaderboard__name {
  color: #979cb0;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.64px;
  margin-left: 12px;
}
.leaderboard__value {
  color: #35d8ac;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
}
.leaderboard__value > span {
  opacity: .8;
  font-weight: 600;
  font-size: 13px;
  margin-left: 3px;
}

.leaderboard {
  box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.4);
}

.leaderboard__profiles article{
	height: 71px;
}

/*尾部*/
footer{
	margin:0 auto;
	font-family: "microsoft yahei";
	color: #666;
	border-top: 2px solid #00ffff;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.067);
}


.w1210 {
	width: 1200px;
	margin: 0 auto;
}

.site-footer {
	font-size: 14px;
	line-height: 1.8;
	background: #fff;
}

.site-footer a:hover {
	color: #ff7300 !important;
}

.site-footer .footer-article {
	padding: 30px 0 20px;
	overflow: hidden;
	border-bottom: 1px solid #666;
}

.site-footer .col-article {
	float: left;
	width: 233px;
	margin-right: 40px;
}

.site-footer .col-article dt {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: normal;
	color: #666;
}

.site-footer .col-article dd {
	width: 232px;
	margin: 0;
	overflow: hidden;
	border-right: 1px solid #ffffff;
}

.site-footer .col-article dd a {
	float: left;
	width: 116px;
	margin: 0 0 6px;
	font-size: 12px;
	color: #666;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.site-footer .col-article.col-article-spe {
	width: 195px;
}

.site-footer .col-article.col-article-spe dd {
	width: auto;
	border: 0;
}

.site-footer .col-article.col-article-spe dd p {
	height: 36px;
	padding-top: 6px;
	font: 20px/36px Arial;
	color: #4a4a4a;
	
}

.site-footer .col-article.col-article-spe dd i {
	float: left;
	margin-right: 10px;
	font-size: 32px;
}

.site-footer .col-article.col-article-spe dd i.orange {
	color: #ff7300;
}

.site-footer .col-article.col-article-spe dd i.blue {
	color: #2da6f6;
}

.site-footer .col-code {
	float: left;
	width: 120px;
	text-align: center;
	color: #9b9ea0;
}

.site-footer .col-code img {
	width: 120px;
	height: 120px;
	margin-bottom: 5px;
}

.footer-links {
	position: relative;
	z-index: 1;
	width: 1140px;
	padding: 10px 0 10px 60px;
	margin: 0 auto;
	font-size: 12px;
	line-height: 24px;
	border-bottom: 1px solid #4b5054;
}

.footer-links span {
	position: absolute;
	left: 0;
}

.footer-links a {
	padding: 0 5px;
	margin: 0 10px;
	color: #73777a;
}

.footer-info .info-text {
	padding-bottom: 10px;
	font-size: 12px;
	text-align: center;
}

.footer-info .info-text .nav-bottom {
	padding: 20px 0 5px;
	font-size: 14px;
	color: #ccc;
	text-align: center;
}

.footer-info .info-text .nav-bottom a {
	padding: 0 8px;
	color: #9b9ea0;
}

.footer-info .info-text .copyright {
	padding-top: 5px;
}

.footer-info .info-text em {
	padding: 0 8px;
}